import { Component } from 'react'
import { View, Text, Image, ScrollView, Input } from '@tarojs/components'
import './index.scss'

interface PrPopInputProps {
  isOpen: boolean
  title?: string
  placeholder?: string
  oldValue?: string
  confirm?(value: string): void
  cancel?(): void
}

interface IndexState {
  value: string
}

export default class PrPopInput extends Component<PrPopInputProps, IndexState>{
  constructor(props) {
    super(props)
    this.state = {
      value: ""
    }
    this.cancel = this.cancel.bind(this)
    this.confirm = this.confirm.bind(this)
    this.onInputChange = this.onInputChange.bind(this)
  }

  // componentWillMount() { }

  componentDidMount() { 
    if(this.props.oldValue){
      this.setState({
        value: this.props.oldValue 
      })
    }
  }

  cancel() {//取消
    console.log("取消")
    this.props.cancel ? this.props.cancel() : ""
    this.setState({
      value: ""
    })
  }
  confirm() {//确定
    let value = this.state.value || (this.props.oldValue ? this.props.oldValue : '')
    this.props.confirm ? this.props.confirm(value) : ""
    this.setState({
      value: ""
    })
  }
  onInputChange(e) {
    this.setState({
      value: e.detail.value
    })
  }

  render() {
    let isOpen = this.props.isOpen
    let value = this.props.oldValue ? this.props.oldValue : this.state.value
    let title = this.props.title || ""
    let placeholder = this.props.placeholder || "请输入名称（50字以内）"
    return (
      <View className='PrPopInput'>
        <View className='PrPopInput_layerOut'
          style={{ display: isOpen ? "block" : "none", zIndex: isOpen ? 101 : -1 }}>
          <View className='PrPopInput_mask' onClick={this.cancel}></View>

          <View className='PrPopInput_centerCard'
            style={{ zIndex: isOpen ? 102 : -1 }}>

            <View className='PrPopInput_centerCard_cont'>
              {/* <View className='text'>请输入密钥</View>
              <Input className='input' placeholderClass="placeholder_input" type='number' placeholder='在此输入密钥' maxlength={30}></Input> */}
              {/* <LgInput onChange={this.onInputChange} value={value.toString()} isNeed={true} type="A" inputName="讨论组名称:" placeholder="在此输入" maxLength={20}></LgInput> */}

              <View className='title'>{title}</View>
              <Input
                value={value}
                className='PopInput'
                placeholderClass='PopInput_placeholder'
                placeholder={placeholder}
                onInput={(e) => this.onInputChange(e)}
                maxlength={50}
              ></Input>
            </View>
            <View className='btn_space'></View>
            <View className='PrPopInput_centerCard_btn'>
              <View className='btn_left' onClick={this.cancel}>取消</View>
              <View className='btn_right' onClick={this.confirm}>确定</View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}
